<template>
  <div class="feedback-container">
    <el-card>
      <el-table :data="feedbackList" style="width: 100%" v-loading="loading">
        <el-table-column prop="nickname" label="用户昵称" width="120" />
        <el-table-column label="头像" width="80">
          <template #default="scope">
            <el-avatar :src="scope.row.avatarUrl" size="small" />
          </template>
        </el-table-column>
        <el-table-column prop="content" label="反馈内容" />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="scope">
            <el-tag>{{ typeMap[scope.row.type] || '未知' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="图片内容">
          <template #default="scope">
            <el-image style="width: 60px; height: 60px" v-for="item in scope.row.image" :src="item" fit="contain" :zoom-rate="1.2" :z-index="99999" :max-scale="7" :min-scale="0.2" :preview-src-list="scope.row.image" preview-teleported />
          </template>
        </el-table-column>
        <el-table-column prop="createdTime" label="反馈时间" width="180">
          <template #default="scope">
            {{ formatTime(scope.row.createdTime) }}
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 16px; text-align: right">
        <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize" :current-page="pageIndex" :page-sizes="[10, 20, 50, 100]" @size-change="handleSizeChange" @current-change="handlePageChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { ElMessage } from 'element-plus';
  import { getFeedbackList } from '@/api/feedback';

  // 分类映射
  const typeMap = {
    1: '功能建议',
    2: 'Bug反馈',
    3: '账号相关',
    4: '违规举报',
    5: '其他'
  };

  const feedbackList = ref([]);
  const total = ref(0);
  const pageIndex = ref(1);
  const pageSize = ref(15);
  const loading = ref(false);

  function formatTime(ts) {
    if (!ts) return '';
    const date = new Date(ts);
    return date.toLocaleString();
  }

  const fetchData = async () => {
    loading.value = true;
    try {
      const res = await getFeedbackList({ pageIndex: pageIndex.value, pageSize: pageSize.value });
      feedbackList.value = res.data?.data || [];
      total.value = res.data?.total || 0;
    } catch (e) {
      ElMessage.error('获取意见反馈失败');
    } finally {
      loading.value = false;
    }
  };

  function handleSizeChange(val) {
    pageSize.value = val;
    pageIndex.value = 1;
    fetchData();
  }
  function handlePageChange(val) {
    pageIndex.value = val;
    fetchData();
  }

  onMounted(fetchData);
</script>
